<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/foot.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/sidebar-menu1.css" rel="stylesheet">

    <style>
        .layui-layer-title {
            background-color: #1a2f42 !important;
            color: white !important;
        }
    </style>

</head>

<body style="background-color:transparent;">
    <div class="top-div">
        <div  class="cubic">
            <ul>
                <li><a href="${ctx!}/web/project/livedata">&nbsp;实时数据&nbsp;</a></li>
                <li  class="current"><a href="${ctx!}/web/project/data/livecurve" >&nbsp;实时曲线&nbsp;</a></li>
                <li><a href="${ctx!}/web/project/data/historycurve" >&nbsp;历史曲线&nbsp;</a></li>
            </ul>
        </div>
        <div class="tabe_div"  style="margin-top: 20px">
            <form method="post"  id="eventqueryform" style="display: inline; ">
                <a class="find_a" style="margin-left: 20px">  时间范围：</a><input style="width: 150px!important; padding: 1px!important; vertical-align: middle!important;" id="startTimeSearch" name="startTimeSearch" class="laydate-icon layer-date">
                <a class="find_a"> - </a><input style="width: 150px!important; padding: 1px!important; vertical-align: middle!important; margin-right: 20px" width="100px" id="endTimeSearch" name="endTimeSearch" class="laydate-icon layer-date">
                <input type="button" class="but_find" value="加载" onclick="loadChart();" style="width: 40px;padding: 1px!important; vertical-align: middle!important; " >
            </form>
        </div>
    </div>

    <div class="foot-div">
            <div id="show-panel" class="col-sm-9 show-panel" style=" padding: 15px 7px 15px 15px!important;height: 100%; width: 100% position: absolute" >
                <div id="main" ></div>
            </div>

            <div class="col-sm-3 text-panel" style="padding: 15px 15px 15px 7px!important;height: 100%; width: 100% position: absolute" >
                <div style="overflow: hidden">
                    <div>
                        <div style="display: inline">
                            选择变量
                        </div>
                        <div style="display: inline; float: right">
                            <input type="button" value="+添加" id="eventadd" onclick="add();" class="but"/>
                            <input type="button" value="-删除" id="eventdel" onclick="del();" class="but"/>
                        </div>
                    </div>
                    <div style="width: 100%; margin-top: 10px">
                        <input style="width: 100%;" type="text" class="form_input text_ient" name="name" placeholder="请输入搜索内容"/>
                    </div>
                    <div style="width: 100%; height: 100%; display: block; margin-top: 10px; top:80px;  overflow:auto; clear:both;">
                        <div id="accordion" class="dropdown">
                            <#if (categories?size>0) >
                                <#list categories as category>
                                <div >
                                    <div class="collapse-title"  data-toggle="collapse" data-parent="#accordion" data-target=".collapse${category.id}">
                                        <span class="fa fa-caret-down"></span>
                                        <a>&nbsp;${category.name}</a>
                                    </div>
                                    <ul>
                                        <#if (category.devices?size>0) >
                                            <#list category.devices as device>
                                            <li href="${device.id}">
                                                <div id="collapse" class="collapse${category.id} collapse-content collapse in">
                                                   <a>${device.name}</a>
                                                </div>
                                            </li>
                                            </#list>
                                        </#if>
                                    </ul>
                                </div>
                                </#list>
                            </#if>

                            </div>

                            <br>
                            <br>
                            <br>
                            <br>

                    </div>
                </div>
            </div>
    </div>
    <#--<div class="wrapper wrapper-content  animated fadeInRight">-->
		<#--<table cellspacing="0" cellpadding="0" rules="cols" id="table_list" class="table_style table-striped" style="margin: 0 auto" >-->
		<#--</table>-->
	<#--</div>-->

    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
    
	<!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>


    <script src="${ctx!}/assets/js/echarts.min.js"></script>
    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {//外部js调用

            var endDate = laydate.render({
                theme: "#23b7e5",
                elem: '#endTimeSearch', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'click',//响应事件。如果没有传入event，则按照默认的click
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime',
                max: 0,
                done: function (value, date) {
                    if (value !== '') {
                        startDate.config.max = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date,
                            hours: date.hours,
                            minutes: date.minutes,
                            seconds: date.seconds
                        }

                    } else {
                        startDate.config.max = {
                            year: '',
                            month: '',
                            date: '',
                            hours: '',
                            minutes: '',
                            seconds: ''
                        }
                    }

                }
            });
            var startDate = laydate.render({
                theme: "#23b7e5",
                elem: '#startTimeSearch', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'click', //响应事件。如果没有传入event，则按照默认的click
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime',
                max: 0,
                done: function (value, date) {
                    if(value !== '') {
                        endDate.config.min = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date,
                            hours: date.hours,
                            minutes: date.minutes,
                            seconds: date.seconds
                        }
                    }else {
                        endDate.config.min = {
                            year: '',
                            month: '',
                            date: '',
                            hours: '',
                            minutes: '',
                            seconds: ''
                        }
                    }
                }});

            setSize();

            chartssize(document.getElementById("show-panel"),document.getElementById("main"));


            $('.dropdown').on('hide.bs.collapse show.bs.collapse', '.collapse-content', function (e) {
                var $this   = $(this);
                $this.parent().parent().prev().find("span").toggleClass("fa-caret-down");
                $this.parent().parent().prev().find("span").toggleClass("fa-caret-right");
            });
        });

        function setSize(){
            var barheight = $("#navbar", window.parent.document).height();//获取当前页面总高度
            var top=barheight+$(".top-div").height()+20;//顶部页面的高度（注意height计算的高度没有把顶部嵌套的页面高度加进去）
            $(".foot-div").css("top",top);//给底部页面添加绝对路径距离上面高度
            $(".foot-div").height(document.documentElement.clientHeight-top);
        }
        
        function loadChart() {
            upload = layer.msg('加载中。。。', {
                icon: 16
                , shade: 0.2,
                time: false
            });
            $.ajax({
                type: "POST",
                url: "${ctx!}/web/project/data/livecurve",
                dataType: "json",
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify(queryParams()),
                success: function(rtn){
                    layer.close(upload);
                    if(rtn.code == "0")
                        generateChart(rtn.data);
                    else
                        layer.alert(rtn.message);
                }
            });
        }


        function queryParams() {
            let selectedDevices=[];
            $('.dropdown').find('li.active').each(function(index,e){
                console.log($(e).attr('href'));
                selectedDevices.push($(e).attr('href'));
            });
            return {
                startTimeSearch: $('#eventqueryform input[name=\'startTimeSearch\']').val(),
                endTimeSearch: $('#eventqueryform input[name=\'endTimeSearch\']').val(),
                selectedDevices: selectedDevices,
            };
        }

        function generateChart(data) {
            //基于准备好的DOM，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'), 'light');
            //指定图表的配置项和数据
            myChart.clear();

            function getSeries(){
                let series = [];
                for(var i = 0; i < data.yLists.length; i++) {
                    var e = {
                        name: data.legends[i],
                        type: 'line',
                        smooth: true,
                        data: data.yLists[i],
                    };
                    series.push(e);
                }
                return series;
            }

            window.addEventListener('resize', function () {
                myChart.resize()
            });


            // 指定图表的配置项和数据
            var option = {
                textStyle: {
                    color: '#fff',
                },
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    textStyle: {
                        color: '#fff',
                    },
                    text: data.title,
                    subtext: data.tag,
                },
                legend: {
                    textStyle: {
                        color: '#fff',
                    },
                    data: data.legends,
                },
                xAxis: {
                    data: data.xList,
                },
                yAxis: {
                    itemStyle: {
                        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                        emphasis: {
                            barBorderRadius: 30
                        },

                        normal: {
                            //柱形图圆角，初始化效果
                            barBorderRadius:[10, 10, 10, 10],
                            label: {
                                show: true,//是否展示
                                position: 'top',
                                textStyle: {
                                    fontWeight:'bolder',
                                    fontSize : '12',
                                    fontFamily : '微软雅黑',
                                }
                            }
                        }
                    },
                },
                series: getSeries(),
            };
            //使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        }

        function add(){
            layer.open({
                type: 2,
                title: '添加变量',
                shadeClose: true,
                shade: false,
                area: ['600px', '280px'],
                content: '${ctx!}/web/project/data/add',
                end: function(index){
                    location.reload();
                }
            });
        }

        function del(){
            layer.open({
                type: 2,
                title: '删除一级条目',
                shadeClose: true,
                shade: false,
                skin: 'shadows',
                closeBtn: 1,
                area: ['800px', '350px'],
                content: '${ctx!}/web/project/data/delete',
                end: function(index){
                    location.reload();
                }
            });
        }


        // 使用刚指定的配置项和数据显示图表。
        function chartssize(container, charts){
            function getStyle(el, name)
            {
                if (window.getComputedStyle) {
                    return window.getComputedStyle(el, null);
                } else {
                    return el.currentStyle;
                }
            }
            let wi = getStyle(container, 'width').width-22;
            let hi = getStyle(container, 'height').height-30;
            charts.style.height = hi;
            charts.style.width = wi;
        }


        window.onresize=function(){
            chartssize(document.getElementById("show-panel"),document.getElementById("main"));
        };

        $(".dropdown").on('click', 'li', function(e) {
            $(this).parent().parent().siblings().find('li').removeClass('active');
            $(this).parent().parent().siblings().find('li a').removeClass('active');
            if($(this).hasClass("active")){
                $(this).removeClass('active');
                $(this).find("a").eq(0).removeClass('active');
            }
            else {
                $(this).addClass('active');
                $(this).find("a").eq(0).addClass('active');
            }

        });
    </script>

    
    

</body>

</html>
